<template>
  <input
    :class="`${inputType} ${className}`"
    :type="type"
    :value="value"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

<script>
import "./ui-input.less";
import isFunction from "lodash/isFunction";
export default {
  props: ["type", "value", "className", "validator"],
  data() {
    return {
      isFocus: false,
      inputType: ""
    };
  },
  methods: {
    handleInput($event) {
      this.$emit("input", $event.target.value);
    },
    handleFocus() {
      this.inputType = "focus";
    },
    handleBlur($event) {
      this.inputType = "";
      if (isFunction(this.validator)) {
        const inputValue = $event.target.value;
        const valid = this.validator(inputValue);
        this.inputType = valid ? "success" : "error";
      }
    }
  }
};
</script>
